import './index.css'
import {data} from './data';
import {useSetState} from 'ahooks';
import zhCN from 'antd/locale/zh_CN';
import {ConfigProvider, Table, Layout, Image, Input, Tag} from 'antd';

const Index_ = props => {
    const [state, setState] = useSetState({
      loading: false,
      dataSource: data,
      filterText: '',
    });
    const {loading, dataSource, filterText} = state;
    const getColumns = () => {
      return [
        {
          title: '图片',
          dataIndex: 'b0',
          width: 150,
          render: value => <Image src={value} width={50}/>
        },
        {
          title: '产品型号',
          dataIndex: 'id',
          width: 160,
          render: (value) => <a onClick={() => {
            props.history.push({pathname: `/${value}`});
          }}>{value}</a>
        },
        {
          title: '产品名称',
          dataIndex: 'b1',
          width: 180,
        },
        {
          title: '状态',
          dataIndex: 'status',
          width: 180,
          render: value => <Tag color={value.includes('已') ? "geekblue" : "volcano"} style={{fontSize: 14}}>{value}</Tag>
        },
        {
          title: '砖块总数',
          dataIndex: 'b2',
          width: 180,
        },
        {
          title: '生产年份',
          dataIndex: 'b3',
          width: 180,
        },
        {
          title: '拼装图纸',
          dataIndex: 'b4',
          width: 180,
          render: (value) => <a onClick={() => window.open(value)}>查看</a>
        },
      ];
    };
    const getItemText = (item) => {
      // 根据需要修改，返回表格数据项的文本内容
      return `${item.id}`;
    };
    const filterData = dataSource?.filter((item) =>
      getItemText(item).toLowerCase().includes(filterText)
    );
    return (
      <ConfigProvider
          locale={zhCN}
        >
        <Layout.Header className='page-head'>
          <div className='page-head-title'>
            乐高积木入坑列表
          </div>
        </Layout.Header>
        <div style={{width: 800, textAlign: 'left', marginLeft: 40, marginTop: 10}}>
          <Input 
            style={{width: 250}} 
            placeholder='型号' 
            onChange={(e) => setState({filterText: e.target.value})} 
          />
        </div>
        <Layout.Content style={{
            margin: '0px 16px',
            padding: '20px',
          }}>
          <Table
            columns={getColumns()}
            bordered
            dataSource={filterData}
            loading={loading}
            rowKey="id"
          />
        </Layout.Content>
      </ConfigProvider>
    );
  };

export default Index_;